<script>
	export let size = 275
	/** @type {'white' | 'black'} */
	export let color = 'white'
</script>

<svg
	style="margin-top: -4px;"
	width={size}
	viewBox="0 -5 28 40"
	fill="none"
	xmlns="http://www.w3.org/2000/svg"
	aria-labelledby="uniqueTitleID uniqueDescID"
>
	<title id="uniqueTitleID">Houdini's Logo</title>
	<desc id="uniqueDescID">Houdini's Logo, on hover the rabbit is going up!</desc>
	<path
		id="logo-hat"
		fill-rule="evenodd"
		clip-rule="evenodd"
		d="M7.17047 24.2748C7.16261 24.5106 7.15185 24.7349 7.13778 24.9476C7.08978 25.6796 7.54124 25.5116 8.2447 25.7223C11.8054 26.787 15.3215 26.7758 18.7916 25.6875C19.4512 25.481 19.882 25.7123 19.882 25.0213V24.2748C15.5896 25.4454 11.3523 25.4454 7.17047 24.2748ZM8.68994 10.8879C6.68136 11.2177 5.3783 11.7486 5.3783 12.347C5.3783 12.3776 5.38203 12.4078 5.38865 12.438C5.61665 14.488 5.71969 16.2289 5.69734 17.661C5.54341 19.0477 5.80245 20.894 5.84052 22.3283C1.92473 22.9754 -0.19558 24.1614 0.0142163 25.534C0.387878 27.9754 4.31443 28.796 7.99973 29.139C12.6119 29.5685 14.6834 29.576 19.3383 29.108C22.9271 28.7467 26.6389 27.905 27.0018 25.534C27.212 24.1618 25.0913 22.9759 21.1755 22.3291C21.2215 20.6118 21.2492 19.3208 21.2782 18.3248C21.3361 16.3282 21.3969 14.4884 21.6274 12.4409C21.6344 12.4099 21.6377 12.3789 21.6377 12.3478C21.6377 11.7644 20.4005 11.2459 18.4788 10.9144C18.61 11.2012 18.7151 11.502 18.7912 11.8132C19.6635 12.028 20.1828 12.2973 20.1828 12.5899C20.1828 13.2921 17.1944 13.8615 13.5078 13.8615C9.82127 13.8615 6.83281 13.2921 6.83281 12.5899C6.83281 12.2808 7.41172 11.9978 8.37422 11.7772C8.45201 11.4693 8.55835 11.1713 8.68994 10.8879Z"
		fill={color}
	/>
	<path
		id="logo-eye"
		fill-rule="evenodd"
		clip-rule="evenodd"
		d="M15.5131 12.7834C15.5131 13.2893 14.7099 13.0943 14.7099 12.7834C14.7099 12.4725 14.7099 12.0078 14.7099 12.0078C14.7099 11.5975 15.0933 11.5975 15.0933 11.5975C15.0933 11.5975 15.5131 11.5359 15.5131 12.0078C15.5131 12.5048 15.5131 12.2774 15.5131 12.7834ZM12.1925 12.7834C12.1925 13.2893 11.358 13.1333 11.358 12.7834C11.358 12.4334 11.358 12.849 11.358 12.1053C11.358 11.6417 11.75 11.5975 11.75 11.5975C11.75 11.5975 12.1925 11.5018 12.1925 12.0078C12.1925 12.5138 12.1925 11.6306 12.1925 12.1366V12.7834ZM13.1797 11.4491C12.9398 11.4491 12.6914 11.4491 12.6914 11.4491H12.4297H11.8594H11.4219H11.0078H10.7109H10.3867L9.11328 11.3008L8.98438 11.6756L8.91823 11.9803C8.81179 12.4451 8.82496 12.5233 9.01494 12.9061L9.22775 13.0037C10.6061 13.1638 11.8006 13.2888 13.2858 13.2888C14.9373 13.2888 17.2695 13.0859 18.0262 12.9036L18.207 12.668C18.207 12.3986 18.2619 12.2177 18.1172 11.8789L18.0262 11.543L17.8906 11.1953L17.3293 11.3623L15.0933 11.4061L13.8398 11.4491H13.1797Z"
		fill={color}
	/>
	<path
		id="logo-head"
		fill-rule="evenodd"
		clip-rule="evenodd"
		d="M17.0122 9.83855C16.6634 9.47275 16.2541 9.16199 15.7998 8.92157C15.6512 8.21231 15.6727 7.21588 15.8978 6.15407C16.3042 4.23652 17.2208 2.8325 17.9445 3.01788C18.6686 3.20327 18.926 4.90771 18.5193 6.82526C18.2093 8.2868 17.6035 9.44999 17.0122 9.83855ZM11.7843 8.68239C11.171 8.91784 10.6202 9.2733 10.1634 9.71937C9.78562 8.85288 9.33003 8.04183 8.79788 7.28582C9.3201 6.68001 9.73555 5.95462 10.0446 5.10964C10.2122 4.63708 10.4605 4.47529 10.6885 4.53198C10.854 4.57294 11.1027 4.72398 11.2062 5.0484C11.6055 6.27532 11.7983 7.48651 11.7843 8.68239ZM13.5288 8.36128C13.276 8.36128 13.0281 8.38073 12.7861 8.41756C12.6495 6.67091 12.2858 5.14275 11.6949 3.83307C11.3051 2.96947 10.6629 1.64448 9.63417 1.45372C8.93733 1.32462 8.28808 1.75331 7.77124 2.44146C7.32144 3.04023 6.97178 3.83638 6.77937 4.63253C6.55798 5.54744 6.51536 7.66693 7.0831 8.39894C7.36324 8.76019 7.76793 8.62942 8.29677 8.00707C8.88975 8.90419 9.32341 9.69744 9.59734 10.3864C9.08506 11.1205 8.78588 12.0056 8.78588 12.9582V12.9644C10.2131 13.1841 11.7251 13.3021 13.2905 13.3021C15.0313 13.3021 16.7064 13.156 18.2722 12.8866V12.8895C18.2619 12.1989 18.0943 11.5446 17.8026 10.9599C18.5445 9.99869 19.2252 8.41756 19.6225 6.55256C20.3226 3.26658 19.8794 0.345565 18.6322 0.0281799C17.385 -0.289618 15.8064 2.11704 15.1062 5.40261C14.8695 6.51284 14.764 7.58127 14.7752 8.52184C14.3784 8.41715 13.9599 8.36128 13.5288 8.36128Z"
		fill={color}
	/>
</svg>

<style>
	#logo-head:hover {
		transform: translate3d(0, -1.5px, 0);
		transition-timing-function: ease-in-out;
		transition-duration: 500ms;
	}
</style>
